<template>
    <div class="page">
        <!-- 顶部模块 -->
        <div class="topMapSelect">
            <div class="flex topComponent">
                <!-- 比例尺 -->
                <div class="mapScale">
                    <div class="logo" v-if="this.$store.state.showLogo"></div>
                    <div v-else>
                        <p>{{this.$store.state.scale}}</p>
                        <el-progress :percentage="100 - this.$store.state.scale" :show-text="false" :stroke-width="1" color="#333333"></el-progress>
                    </div>
                </div>
                <!-- 选择地图 -->
                <div class="flex selectContent">
                    <div class="flex boxShadow mapSelectBox">
                        <div class="mapSelect" @click="chooseMap">
                        MAP
                        </div>
                        <div class="administrator" @click="authorPsw"></div>
                    </div>
                    <transition name="el-zoom-in-top">
                        <div class="flex mappingSelect" v-show="this.$store.state.showMapList">
                            <div class="boxShadow optionsBox">
                                <!-- <div class="mapListOverflow"> -->
                                    <!-- <div class="flex optionItem" v-for="(item, index) in this.$store.state.mapList" :key="index">
                                        <div class="mapTitle" @click="changeMapBtn(item)">{{item}}</div>
                                        <div class="mapListIcon flex">
                                            <el-button native-type="button" size="medium" icon="el-icon-edit" class="mapListBtn" :disabled="item === 'master' ? true:false"></el-button>
                                        </div>
                                        <div class="mapListIcon flex" @click="delMapBtn(item)">
                                            <el-button native-type="button" size="medium" icon="el-icon-delete" class="mapListBtn" :disabled="item === 'master' ? true:false"></el-button>
                                        </div>
                                    </div> -->
                                <!-- </div> -->
                                <div class="flex optionItem continueMapping" @click="continueMappingBtn">
                                    继续建图
                                </div>
                                <div class="flex optionItem newMapBtn" @click="newMappingBtn">
                                    新建地图
                                </div>
                            </div>
                        </div>
                    </transition>
                </div>

                <!-- 电量 -->
                <div class="power">
                    <el-progress type="circle" :percentage="this.$store.state.battery" :color="this.$store.state.batteryBg" :width="40" :stroke-width="3" :status="this.$store.state.batteryStatus">充电中</el-progress>
                </div>
            </div>
        </div>

        <!-- 紧急停止 -->
        <div class="boxShadow stopBtn" :class="stopBtnStatus? 'btnStop' : 'btnStart'" @click="stopBtn"></div>
         <!--定位点  -->
         <div class="boxShadow nowLocation" :class="locationBtn? 'locationNor' : 'locationSel'" @click="clickLocationBtn"></div>
         <!-- 右侧功能按钮 -->
         <div class="flex boxShadow functionBtns">
            <el-tooltip content="站点" placement="left">
                <div :class="station?'stationSel':'stationNor'" @click="clickStation"></div>
            </el-tooltip>
            <el-tooltip content="轨迹" placement="left">
                <div :class="track?'trackSel':'trackNor'" @click="clickTrack"></div>
            </el-tooltip>
            <el-tooltip content="PLC" placement="left">
                <div :class="plc?'localPlcSel':'localPlcNor'" @click="clickPlc"></div>
            </el-tooltip>
            <!-- <el-tooltip content="激光" placement="left">
                <div :class="plc?'laserSel':'laserNor'" @click="clickPlc()"></div>
            </el-tooltip> -->
            <!-- <div :class="debug?'debugSel':'debugNor'" @click="clickDebug"></div> -->
            <!-- <div :class="diagnose?'diagnoseSel':'diagnoseNor'" @click="clickDiagnose"></div> -->
            <el-tooltip content="WIFI设置" placement="left">
                <div :class="this.$store.state.showWifiSetting?'wifiSel':'wifiNor'" @click="clickWifi"></div>
            </el-tooltip>
            <div class="moreBtn" @click="showMoreModule"></div>
         </div>
         
         <!-- 更多功能按钮 -->
         <transition name="el-fade-in-center">
             <more-btns v-show="this.$store.state.showMoreBtns"></more-btns>
         </transition>
         

         <!-- 放大缩小 -->
         <div class="boxShadow flex mapSizeBtn">
             <div class="bigBtn" @click="mapZoom('max')"></div>
             <div class="smBtn" @click="mapZoom('min')"></div>
         </div>
         <!-- 拖拽按钮 -->
         <drag @drag="dragStatus"></drag>
         
         <!-- 删除地图 -->
         <transition name="el-zoom-in-bottom">
             <delete-map v-show="this.$store.state.delMap"></delete-map>
         </transition>

        <!-- 添加地图 -->
         <transition name="el-zoom-in-bottom">
             <add-map-component v-show="this.$store.state.addMap"></add-map-component>
         </transition>

         <!-- 编辑地图按钮 -->
         <transition name="el-zoom-in-bottom">
            <edit-map-btns v-show="this.$store.state.edipMapModule"></edit-map-btns>
         </transition>
         <!-- 授权密码 -->
         <transition name="el-zoom-in-bottom">
             <authorization v-show="this.$store.state.authorization"></authorization>
         </transition>

         <!-- 拖拽圆盘 -->
         <transition name="el-fade-in-center">
             <drag-component v-show="this.$store.state.showDragModule"></drag-component>
         </transition>
         
         <!-- 站点列表 -->
         <transition name="el-zoom-in-bottom">
            <stations-component v-show="this.$store.state.stationsModule"></stations-component>
         </transition>

         <!-- 轨迹列表 -->
         <transition name="el-zoom-in-bottom">
            <tracks-component v-show="this.$store.state.tracksModule"></tracks-component>
         </transition>


         <!-- 系统诊断 -->
         <transition name="el-zoom-in-bottom">
            <diagnose-component v-show="showModule.diagnoseModule"></diagnose-component>
         </transition>

         <!-- wifi -->
         <transition name="el-zoom-in-bottom">
             <wifi-setting v-show="this.$store.state.showWifiSetting"></wifi-setting>
         </transition>
         
         <!-- 软件更新 -->
         <transition name="el-zoom-in-bottom">
             <update v-show="this.$store.state.showUpdate"></update>
         </transition>

         <!-- 音量调节 -->
         <transition name="el-zoom-in-bottom">
             <adjust-voice v-show="this.$store.state.showVoice"></adjust-voice>
         </transition>
         
         <!-- 站点详情 -->
         <transition name="el-zoom-in-bottom">
             <station v-show="this.$store.state.stationModule"></station>
         </transition>

         <!-- 站点编辑 -->
         <transition name="el-zoom-in-bottom">
            <!-- <station-edit v-show="this.$store.state.stationEdit"></station-edit> -->
         </transition>

         <!-- 添加站点 -->
         <transition name="el-zoom-in-bottom">
            <station-add v-show="this.$store.state.showAddStation"></station-add>
         </transition>

         <!-- 删除站点 -->
         <transition name="el-zoom-in-bottom">
            <station-delete v-show="this.$store.state.deleteStation"></station-delete>
         </transition>

         <!-- 轨迹详情 -->
         <transition name="el-zoom-in-bottom">
             <track-detail v-show="this.$store.state.trackModule"></track-detail>
         </transition>

         <!-- 添加轨迹 -->
         <transition name="el-zoom-in-bottom">
             <track-add v-show="this.$store.state.showAddTrack"></track-add>
         </transition>

         <!-- 轨迹删除 -->
         <transition name="el-zoom-in-bottom">
             <track-delete v-show="this.$store.state.deleteTrack"></track-delete>
         </transition>

         <div id="mapNavDiv"></div>

         <!-- 遮罩 -->
         <div class="maskBox" @click="clickMask" v-show="this.$store.state.showMask"></div>
    </div>    
</template>

<script>
import { Message } from 'element-ui'
import moreBtns from '@/components/moreBtns.vue'
import drag from '@/components/dragBtn.vue'
import deleteMap from '@/components/deleteMap.vue'
import authorization from '@/components/authorization.vue'
import dragComponent from '@/components/dragComponent.vue'
import debugComponent from '@/components/debugComponent.vue'
import diagnoseComponent from '@/components/diagnoseComponent.vue'
import stationsComponent from '@/components/stationsComponent.vue'
import tracksComponent from '@/components/tracksComponent.vue'
import wifiSetting from '@/components/wifiSetting.vue'
import update from '@/components/update.vue'
import station from '@/components/station.vue'
// import stationEdit from '@/components/stationEdit.vue'
import stationAdd from '@/components/stationAdd.vue'
import stationDelete from '@/components/stationDelete.vue'
import trackDetail from '@/components/trackComponent.vue'
import trackSetting from '@/components/trackSetting.vue'
import trackAdd from '@/components/trackAdd.vue'
import trackDelete from '@/components/trackDelete.vue'
import addMapComponent from '@/components/addMapComponent.vue'
import editMapBtns from '@/components/editMapFunction.vue'
import adjustVoice from '@/components/adjustVoice.vue'
import { DATA } from '../js/data'
import { NAV } from '../js/navigation'
import { stopRobot, locationRobot, showStations, showTrack, zoomIn, zoomOut, hideOtherModule, changeMap, continueMapping, newMapping, showPlc } from '../js/methods'
import { showRobot } from '../js/init'

// import {rosMove} from '@/js/roslibjs/rosRequest'
export default {
    name: 'home',
    components:{
        moreBtns,
        drag,
        dragComponent,
        stationsComponent,
        tracksComponent,
        wifiSetting,
        authorization,
        deleteMap,
        update,
        debugComponent,
        diagnoseComponent,
        station,
        // stationEdit,
        stationAdd,
        stationDelete,
        trackDetail,
        trackSetting,
        trackAdd,
        trackDelete,
        addMapComponent,
        editMapBtns,
        adjustVoice
    },
    data(){
        return{
            power: 50,
            showLogo: false,
            stopBtnStatus: true,
            locationBtn: false,
            station: true,
            track: false,
            plc: false,
            localEstimate: false,
            debug: false,
            diagnose: false,
            showModule:{
                moreBtns: false,
                dragModule: false,
                debugModule: false,
                tracksModule: false,
                diagnoseModule: false,
                trackSettingModule:false,
            }
        }
    },

    //计算属性
    watch:{
        //站点
        station(newVal,oldVal){
        },

        //轨迹
        track(newVal, oldVal){
            
        }
    },

    methods:{
        // 点击地图
        chooseMap: function() {
            const that = this;
            if(that.$store.state.showMapList){
                that.$store.commit('switchMapList',false);
                that.$store.commit('switchShowMask',false);
            }else{
                that.$store.commit('switchMapList',true);
                that.$store.commit('switchShowMask',true);
            }
        },

        //切换地图
        changeMapBtn:function(mapName){
            if(mapName === this.$store.state.nowMapName){
                return
            }
            this.$store.commit('setNowMapName',mapName);
            changeMap(mapName);
            hideOtherModule();
        },

        //继续建图
        continueMappingBtn:function () {
            hideOtherModule();
            continueMapping()
        },

        //新建地图
        newMappingBtn:function(){
            hideOtherModule();
            newMapping()
        },


        //删除地图
        delMapBtn:function(mapName){
            if(window.localStorage.getItem('authorizationPassword')){
                if(mapName === 'master'){
                    return
                }else{
                    this.$store.commit('setDelMapName',mapName);
                    this.$store.commit('switchMapList',false);
                    this.$store.commit('switchShowMask',true);
                    this.$store.commit('switchDelMap',true);
                }
            }else{
                this.$message({
                    showClose: true,
                    message: '暂无操作权限，请输入授权密码',
                    type: 'warning'
                });
            }
        },

        //授权密码
        authorPsw:function(){
            hideOtherModule();
            this.$store.commit('switchAutherModule',true);
            this.$store.commit('switchShowMask',true);
        },

        //急停按钮
        stopBtn: function(){
            const that = this;
            if(that.stopBtnStatus){
                stopRobot()
                // that.stopBtnStatus = false
            }else{
                that.stopBtnStatus = true
            }
        },

        //定位
        clickLocationBtn: function(){
            const that = this;
            hideOtherModule();
            if(that.locationBtn){
                that.locationBtn = false
            }else{
                that.locationBtn = true
            }
            showRobot(!that.locationBtn);
            // locationRobot(!that.locationBtn)
        },

        //点击站点按钮
        clickStation:function(){
            const that = this;
            hideOtherModule();
            if(that.$store.state.stationsModule){
                that.$store.commit('switchShowMask',false);
                that.station = false;
                showStations(false);
                that.$store.commit('switchStationList',false);
            }else{
                that.$store.commit('switchShowMask',true);
                that.station = true;
                showStations(true);
                that.$store.commit('switchStationList',true);
            }
        },

        //点击轨迹按钮
        clickTrack:function(){
            const that = this;
            hideOtherModule();
            if(that.$store.state.tracksModule){
                that.$store.commit('switchShowMask',false);
                that.track = false;
                showTrack(false);
                that.$store.commit('switchTrackList',false);
            }else{
                that.$store.commit('switchShowMask',true);
                that.track = true;
                showTrack(true);
                that.$store.commit('switchTrackList',true);
            }
        },

        //点击位置估计
        clicklocalEstimate:function(){
            hideOtherModule();
            let that = this;
            that.localEstimate = !that.localEstimate;
            console.log("位置估计")
        },

        //点击plc
        clickPlc:function(type){
            hideOtherModule();
            let that = this;
            that.plc = !that.plc;
            console.log("plc")
            showPlc();
        },

        //点击调试
        clickDebug:function(){
            const that = this;
            that.debug = !that.debug;
            that.showModule.debugModule = !that.showModule.debugModule;
        },

        //点击诊断
        clickDiagnose:function(){
            const that = this;
            that.diagnose = !that.diagnose;
            that.showModule.diagnoseModule = !that.showModule.diagnoseModule;
        },

        /**
         * 点击wifi,判断缓存中是否有数据
         * 有则赋给state
         * **/
        clickWifi:function(){
            hideOtherModule();
            const that = this;
            if(window.localStorage.getItem('authorizationPassword')){
                that.$store.commit('switchWifiSetting',true)
                that.$store.commit('switchShowMask',true);
            }else{
                this.$message({
                    showClose: true,
                    message: '暂无操作权限，请输入授权密码',
                    type: 'warning'
                });
            }

            let wifiInfos = window.localStorage.getItem('wifiInfos');
            if(wifiInfos){
                this.$store.commit('setWifiInfos',wifiInfos)
            }
            
        },

        //点击更多
        showMoreModule:function(){
            hideOtherModule();
            this.$store.commit('switchMoreBtns',true);
            this.$store.commit('switchShowMask',true);
        },

        //放大缩小
        mapZoom:function(type){
            if(type == 'max'){
                zoomIn(1.2)
            }else{
                zoomOut(1.2)
            }
        },

        //拖拽按钮
        dragStatus:function(newVal){
            hideOtherModule();
            let dragState = this.$store.state.switchDragModule;
            if(dragState === true){
                this.$store.commit('switchDragModule',false)
            }else{
                this.$store.commit('switchDragModule',true)
            }
        },

        //点击遮罩
        clickMask:function(){
            hideOtherModule();
        }
    }
}
</script>

<style scoped lang="less">

    .page{
        padding: 15px 8px;
        font-size: 14px;
        height: 100%;
    }
    .topMapSelect{
        position: fixed;
        width: 100%;
        z-index: 996;
        left: 8px;
        top: 15px;
    }
    .topComponent{
        justify-content: space-between;
        align-items: center;
    }
    .logo{
        height: 40px;
        background: url("../../src/assets/icon_logo.png") no-repeat center;
        background-size: contain;
    }
    .mapScale{
        width: 60px;
        font-size: 10px;
    }

    .mapSelect{
        width: 75px;
        height: 40px;
        font-size: 16px;
    }
    .power{
        width: 60px;
        font-size: 12px;
    }
    .mapSelectBox{
        padding: 5px 0;
        border-radius: 3px;
        background-color: #ffffff;
    }
    .mapSelect{
        width: 150px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    .selectContent{
        position: relative;
        width: calc(100% - 120px);
        flex-direction: column;
    }
    .administrator{
        width: 43px;
        height: 20px;
        border-left: 1px solid #eeeeee;
        background: url("../../src/assets/icon-administrator.png") no-repeat center;
        background-size: contain;
    }
    .mappingSelect{
        position: absolute;
        top: 40px;
        z-index: 996;
        width: 100%;
        left: 0;
    }
    .optionsBox{
        width: 193px;
        background-color: #ffffff;
        border-radius: 3px;
        flex-direction: column;
        
        .mapListOverflow{
            max-height: 135px;
            overflow-y: scroll;
        }
        .optionItem{
            height: 33px;
            line-height: 33px;
            border-bottom: 2px solid #eeeeee;
        }
        .mapTitle{
            flex: 9;
            height: 33px;
            text-align: center;
            line-height: 33px;
        }
        .mapListIcon{
            flex: 2;
            height: 33px;
        }
        .mapListBtn{
            padding: 0;
            border: none;
        }
        .newMapBtn{
            width: 100%;
            background-color: #ffffff;
            color: #333333;
        }
        .continueMapping{
            width: 100%;
            background-color: #ffffff;
            color: #333333;
        }
    }

    .nowLocation{
        width: 35px;
        height: 35px;
        border-radius: 4px;
        position: fixed;
        bottom: 15px;
        left: 8px;
        z-index: 994;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #ffffff;
        background-size: 70%;
    }
    .locationNor{
        background-image: url("../../src/assets/icon-nowLocation-nor.png");
    }
    .locationSel{
        background-image: url("../../src/assets/icon-nowLocation-sel.png");
    }
    .stopBtn{
        width: 35px;
        height: 35px;
        border-radius: 4px;
        position: fixed;
        bottom: 100px;
        left: 8px;
        z-index: 994;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #ffffff;
        background-size: 70%;
    }
    .btnStop{
        background-image: url("../../src/assets/icon-stop.png");
    }
    .btnStart{
        background-image: url("../../src/assets/icon-start.png");
    }
    
    .mapSizeBtn{
        flex-direction: column;
        width: 35px;
        height: 70px;
        border-radius: 4px;
        position: fixed;
        bottom: 100px;
        right: 8px;
        z-index: 994;
        padding: 0 4px;
        background-color: #ffffff;
        .bigBtn{
            background-image: url("../../src/assets/icon-big.png");
            border-bottom: 1px solid #eeeeee;
        }
        .smBtn{
            background-image: url("../../src/assets/icon-sm.png");
        }
        .bigBtn,.smBtn{
            width: 100%;
            height: 35px;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #ffffff;
            background-size: 80%;
        }
    }
    .functionBtns{
        position: fixed;
        background: #ffffff;
        // bottom: 220px;
        top: 100px;
        right: 8px;
        z-index: 996;
        width: 35px;
        border-radius: 5px;
        flex-direction: column;
        padding: 0 4px;
        div{
            width: 31px;
            height: 40px;
            border-bottom: 2px solid #eeeeee;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 70%;
        }
        .stationSel{
            background-image: url("../../src/assets/icon-station-sel.png")
        }
        .stationNor{
            background-image: url("../../src/assets/icon-station-nor.png")
        }
        .trackSel{
            background-image: url("../../src/assets/icon-track-sel.png")
        }
        .trackNor{
            background-image: url("../../src/assets/icon-track-nor.png")
        }
        .localPlcSel{
            background-image: url("../../src/assets/icon-plc-sel.png")
        }
        .localPlcNor{
            background-image: url("../../src/assets/icon-plc-nor.png")
        }
        .localEstimateSel{
            background-image: url("../../src/assets/icon-track-sel.png")
        }
        .localEstimateNor{
            background-image: url("../../src/assets/icon-track-nor.png")
        }
        .laserSel{
            background-image: url("../../src/assets/icon-laser-sel.png");
        }
        .laserNor{
            background-image: url("../../src/assets/icon-laser-nor.png");
        }
        .debugSel{
            background-image: url("../../src/assets/icon-debug-sel.png")
        }
        .debugNor{
            background-image: url("../../src/assets/icon-debug-nor.png")
        }
        .diagnoseSel{
            background-image: url("../../src/assets/icon-diagnose-sel.png")
        }
        .diagnoseNor{
            background-image: url("../../src/assets/icon-diagnose-nor.png")
        }
        .wifiSel{
            background-image: url("../../src/assets/icon-wifi-sel.png")
        }
        .wifiNor{
            background-image: url("../../src/assets/icon-wifi-nor.png")
        }
        .moreBtn{
            background-image: url("../../src/assets/icon-more-nor.png")
        }
    }
</style>